<script setup>
defineProps({
  goods: {
    type: Object,
    default: () => {},
  },
});
</script>

<template>
  <div class="goodsItem" style="display: flex;justify-content: center;flex-wrap: wrap;padding: 10px 0 10px 0;">
    <img style="width: 80%" :src="goods.picture" />
    <div
      style="
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 80%;
        font-weight: 700;
        text-align: center;
        margin-top: 5px;
      "
    >
      {{ goods.name }}
    </div>
    <div
      style="
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 80%;
        text-align: center;
        margin-top: 10px;
      "
    >
      {{ goods.desc }}
    </div>
    <div
      style="
        display: flex;
        justify-content: center;
        color: red;
        margin-top: 10px;
        font-size: 15px;
      "
    >
      ￥{{ goods.price }}
    </div>
  </div>
</template>



<style scoped>
.goodsItem {
  transition: 
    box-shadow 0.3s ease,
    transform 0.3s ease;
    cursor: pointer;
}

.goodsItem:hover {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  transform: 
    translateY(-5px) 
    scale(1.02);
}
</style>